(function() {
	var page      = pf.newPage('testDrive');
	var $el       = null;
	var $keyboard = page.$keyboard = null;

	var $_input  = null;
	var $carimg  = null;
	var $steps   = null;
	var $bookBtn = null;
	var $inputs  = null;
	var _step    = 0;

	var params = {};

	/**
	 * 初始化时调用
	 */
	page.onCreate = function() {
		$el     = page.$el;

		$_input  = $el.find('#hidden-input');
		$carimg  = $el.find('.carimg');
		$steps   = $el.find('.step-content>.item');
		$bookBtn = $el.find('.book.btn');
		$inputs  = $steps.find('.input');

		$bookBtn.on('click', enterEvent);

		// init keyboard
		$el.find('#hidden-input').keyboard({
			layout:     'qwerty',
			stayOpen:   true,
			openOn:     null,
			reposition: false,
			usePreview: false,
			alwaysOpen: true,
			display: {
				'bksp':   "\u2190",
				'cancel': "Clear"
			},
			userEvent:  function() {
				if(_step == 2) {
					var v = $_input.val().replace(/\D/g, '').substr(0, 4);
					$_input.val(v);

					$steps.eq(_step).find('.input').each(function(index) {
						$(this).text(v.substr(index*2, index*2+2));
					});

					if(v.length == 4)
						$bookBtn.addClass('avaliable');
					else
						$bookBtn.removeClass('avaliable');

				}else
					$steps.eq(_step).find('.input').text($_input.val());
			},
			clearEvent: function() {
				$_input.val('');
			},
			enterEvent: enterEvent
		});
		$el.find('#hidden-input').data('keyboard').reveal();
		$keyboard = page.$keyboard = $('.ui-keyboard').hide();
		window.setTimeout(function() {
			var w = $keyboard.width();
			var top = (window.innerHeight || document.documentElement.clientHeight) - $keyboard.height() - 10;
			$keyboard.css({
				'bottom':      0,
				'left':        '50%',
				'margin-left': -w/2,
				'top':         top
			});
		}, 100);
	};

	/**
	 * 页面显示时自动调用
	 */
	page.onShow = function(params) {
		params = params || {};

		$carimg.css('background-image', 'url('+params.car_img+')');
		$inputs.text('');
		// $el.show();

		window.setTimeout(function() {
			$keyboard.show();
		}, 1000);

		goStep(0);
	};

	/**
	 * 页面隐藏时调用
	 */
	page.onHide = function() {
		$keyboard.hide();
		// $el.hide();

		$steps.find('.input').removeClass('error');
		$bookBtn.removeClass('avaliable');
	};

	/**
	 * 页面中下部点击事件
	 */
	page.onMidEvent = function(flag) {
		// flag = prev || back || next
		console.log(flag);
	};

	var showError = function() {
		$steps.eq(_step).find('.input').addClass('error');
	};
	var showCorrect = function() {
		$steps.eq(_step).find('.input').removeClass('error');
	};
	var resetInput = function() {
		$steps.eq(_step).find('.input').val();
		showCorrect();
	};

	var enterEvent = function() {
		var v = $_input.val();

		// validate
		var validate = function(index) {
			var res = true;
			switch(index) {
				case 0:
					res = v.length >= 2;
					break;
				case 1:
					res = /^[0-9a-z][_.0-9a-z-]{0,31}@([0-9a-z][0-9a-z-]{0,30}[0-9a-z]\.){1,4}[a-z]{2,4}$/.test(v);
					break;
				case 2:
					res = $bookBtn.hasClass('avaliable');
					break;
			}

			if(res)
				showCorrect();
			else
				showError();

			return res;
		};

		if(validate(_step)) {
			var isEnd = goStep(_step + 1);
			if(!isEnd) {

			}
		}else {

		}
	};

	var goStep = function(index) {
		if(index < $steps.length) {
			_step = index;
			$_input.val('');
			$steps.hide().eq(index).show();

			if(index == $steps.length-1) {
				window.setTimeout(function() {
					page.triggerEvent('close');
				}, 1000);
			}

			return false;
		}else
			return true;
	};

})();


